<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title>Demo</title>
  <meta name="description" content=""/>
  <meta name="viewport" content="width=device-width"/>
  <base href="/"/>
  <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css"/>
  <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $.get("/user", function(data) {
        $("#user").html(data.name);
        $(".unauthenticated").hide()
        $(".authenticated").show()
    });
  </script>
</head>
<body>
<h1>Demo</h1>
<div class="container">
  <div class="container unauthenticated">
    With GitHub: <a href="/oauth2/authorization/github">click here</a>
  </div>
  <div class="container authenticated" style="display:none">
    Logged in as: <span id="user"></span>
  </div>
</div>
</body>
</html>